<template>
  <div class="member-setting-content">
    <van-cell-group>
      <van-uploader class="upload-avatar"
                    :after-read="changeAvatar">
        <van-cell :title="memberInfo.member_nickname || memberInfo.member_name"
                  is-link
                  :icon="memberInfo.member_avatar"
                  class="member-avatar" />
      </van-uploader>
      <van-cell title="昵称"
                is-link
                :value="memberInfo.member_nickname || memberInfo.member_name"
                @click="openLink('EditName',{nickname:memberInfo.member_nickname || memberInfo.member_name})" />
      <van-cell title="手机号"
                is-link
                :value="memberMobile"
                @click="openLink('BindMobile')" />
      <van-cell title="登录密码"
                is-link
                @click="openLink('EditPassword')" />
      <van-cell title="支付密码"
                is-link
                @click="openLink('EditPayPassword')" />
      <van-cell title="实名认证"
                is-link
                @click="openLink('RealyName')"
                :value="realyNameStatus[memberInfo.member_auth_state]" />

    </van-cell-group>

    <div class="exit-btn">
      <van-button block
                  round
                  class="btn"
                  @click="logout">退出登录</van-button>

    </div>
  </div>
</template>

<script>
import { mobileMosaic, callAppFunction } from '@/utils/utils'
import { editMemberAvatar, getMemberInfo, logout } from '@/api/memberInfo'
import { mapMutations } from 'vuex'
export default {
  name: 'MemberSetting',
  data() {
    return {
      mobileMosaic: Object.freeze(mobileMosaic),
      memberInfo: {}, // 用户信息
      realyNameStatus: Object.freeze(['未实名', '审核中', '未通过', '已认证'])
    }
  },
  created() {
    this.initMemberInfo()
  },
  computed: {
    memberMobile() {
      if (this.memberInfo.member_mobilebind === 0) {
        return '未绑定手机'
      } else {
        return mobileMosaic(this.memberInfo.member_mobile)
      }
    }
  },
  methods: {
    ...mapMutations({
      memberUpdate: 'memberUpdate',
      memberEdit: 'memberEdit',
      memberLogout: 'memberLogout'
    }),

    /**
     * 初始化用户信息
     */
    initMemberInfo() {
      getMemberInfo()
        .then(res => {
          this.memberUpdate({ info: res.result.member_info })
          this.memberInfo = res.result.member_info
        })
        .catch(res => {})
    },
    /**
     * 重新选择头像
     */
    changeAvatar(file) {
      let formData = new FormData()
      formData.append('memberavatar', file.file)
      editMemberAvatar(formData)
        .then(res => {
          this.$toast({
            type: 'success',
            message: res.message || '修改成功'
          })
          this.memberInfo.member_avatar = file.content
        })
        .catch(res => {
          this.$toast({
            type: 'fail',
            message: res.message || '上传失败，请重试'
          })
        })
    },

    /**
     * 选择修改性别
     */
    onSelectSex() {},

    // 退出登录
    logout() {
      if (callAppFunction('jsCallAppLoginOut')) {
        return false
      }
      /**
       * 有时候在个人中心就无法加载
       */
      if (this.memberInfo && this.memberInfo.member_name) {
        logout(this.memberInfo.member_name)
          .then(res => {
            this.memberLogout()
            // 调起app退出登陆
            this.$router.replace({ name: 'HomeIndex' })
            this.memberUpdate({ info: {} }) // 退出登录后清空信息
          })
          .catch(res => {
            this.memberLogout()
            // 调起app退出登陆
            this.$toast({
              type: 'loading',
              message: res.message
            })
          })
      } else {
        // 直接清空缓存退出
        this.memberLogout()
        this.memberUpdate({ info: {} }) // 退出登录后清空信息
      }
    },
    /**
     * 打开链接
     * @param {String} name 要打开的页面名称
     * @param {String} query 要传递的参数值
     */
    openLink(name, query) {
      if (!name) return false
      this.$router.push({ name, query })
    }
  }
}
</script>

<style lang="scss">
.member-setting-content {
  .upload-avatar {
    width: 100%;
    /deep/ .van-uploader__input-wrapper {
      width: 100%;
    }
  }
  .member-avatar {
    height: 90px;
    align-items: center;
    /deep/ .van-cell__left-icon {
      width: 50px;
      height: 50px;
      margin-right: 15px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .exit-btn {
    width: 100%;
    padding: 30px 20px;
    .btn {
      background-color: $mainColor;
      color: #ffffff;
    }
  }
}
</style>
